<template>
  <div class='user'>
    <div class='search'>
      <page-search
        @handle-search='handleSearch'
        @handle-reset='handleReset'
        :search-config='searchConfig'
      ></page-search>
    </div>
    <page-content
      ref='contentRef'
      @create-user-fn='showModal'
      @edit-user-fn='showModal'
      :content-config='contentConfig'
    >
      <template #enableSlot='scope'>
        <el-button size='small' :type='scope.row.enable ? "primary" : "danger"' plain>
          {{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template>
    </page-content>
    <page-modal ref='modalRef' :modal-config='modalConfig'></page-modal>
  </div>
</template>

<script setup lang='ts'>
import PageContent from '@/components/page-content/page-content.vue'
import PageSearch from '@/components/page-search/page-search.vue'
import PageModal from '@/components/page-modal/page-modal.vue'
import searchConfig from '@/views/main/system/user/config/search.config'
import contentConfig from '@/views/main/system/user/config/content.config'
import modalConfig from '@/views/main/system/user/config/modal.config'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'

const { contentRef, handleSearch, handleReset } = usePageContent()
const { modalRef, showModal } = usePageModal()
</script>

<style scoped lang='less'>
.user {
}
</style>
